<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% 
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
	pageContext.setAttribute("basePath",basePath);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
		<title>副文本编辑器</title>
		<link rel="icon" href="<%=basePath %>views/gj/img/favicon.png" type="image/x-icon">
		<link rel="stylesheet" href="<%=basePath %>views/lcx/layui-v2.5.5/layui/css/layui.css" />
		<link rel="stylesheet" href="<%=basePath %>views/lcx/layui-v2.5.5/layui/css/modules/layer/default/layer.css" />
		<script src="<%=basePath %>views/lcx/layui-v2.5.5/layui/layui.js"></script>
		<script src="<%=basePath %>views/lcx/layui-v2.5.5/layui/lay/modules/layer.js"></script>
		<script type="text/javascript" src="${basePath }/static/wangEditor/wangEditor.min.js"></script>
		<script type="text/javascript" src="${basePath }/views/lcx/js/jquery-3.3.1.min.js"></script>
		<style type="text/css">
	        .toolbar {
	            border: 1px solid #ccc;
	        }
	        .text {
	            border: 1px solid #ccc;
	            height: 400px;
	        }
	    </style>
	</head>
	<body>
		<input type="hidden" id="indexMsg" value="${msg }"/>
		<div id="div1" class="toolbar"></div>
	    <div style="padding: 5px 0; color: #ccc"></div>
	    <div id="div2" class="text"> <!--可使用 min-height 实现编辑区域自动增加高度-->
	        <p>请输入内容</p>
	    </div>
	    <div style="width: 500px; padding: 20px 0px 0px 20px">
			<div class="layui-form-item">
			   <label class="layui-form-label">文章名称：</label>
			   <div class="layui-input-block">
			     <input id="acticlename" class="layui-input" type="text" name="articleName"/>
			   </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">文章类型：</label>
			    <div class="layui-input-block">
			      <select id="articletype" style="width: 390px; height:36px; line-height: 36px; border-color: #e6e6e6;" name="articleType">
			        <option value="0">-请选择-</option>
			        <option value="1">游艺竞技</option>
			        <option value="2">民间美术</option>
			        <option value="3">民间舞蹈</option>
			        <option value="4">民间戏剧</option>
			        <option value="5">民间音乐</option>
			        <option value="6">民间杂技</option>
			        <option value="7">民间手工技艺</option>
			        <option value="8">消费习俗</option>
			        <option value="9">岁时节令</option>
			        <option value="10">民间文学</option>
			        <option value="11">曲艺</option>
			        <option value="12">民间信仰</option>
			        <option value="13">民间知识</option>
			      </select>
			    </div>
			</div>
			<div class="layui-form-item">
			   <label class="layui-form-label">文章封面：</label>
			   <div class="layui-input-block">
			     <input id="articleCover" onchange="showImg(this)" type="file" name="articleCover">
			   </div>
			</div>
			<div class="layui-form-item">
			   <label class="layui-form-label">封面预览：</label>
			   <div class="layui-input-block">
			     <img style="width: 126px; height: 96px" id="img" alt="" src="">
			   </div>
			</div>
	    	<input id="value" type="hidden" name="value" id="aValue" />
	    	<button style="margin-left: 400px"  class="layui-btn" onclick="getEditorData();" type="submit">提交数据</button>
	    </div>
		<script type="text/javascript">
			var E = window.wangEditor;
	        var editor = new E('#div1', '#div2'); // 两个参数也可以传入 elem 对象，class 选择器
	        editor.customConfig.fontNames = [
	            '宋体',
	            '微软雅黑',
	            'Arial',
	            'Tahoma',
	            'Verdana'
	        ];
	        editor.customConfig.uploadImgMaxSize = 10* 1024 * 1024;
	        editor.customConfig.uploadImgMaxLength =20;
			editor.customConfig.uploadImgServer = '${pageContext.request.contextPath }/editorImgUpload';
			editor.customConfig.uploadFileName = 'myFileName';
			editor.create();
			
			function showImg(obj) {
			    var file=$(obj)[0].files[0];    //获取文件信息
			    var imgdata='';
			    if(file)
			    {
			        var reader=new FileReader();  //调用FileReader
			        reader.readAsDataURL(file); //将文件读取为 DataURL(base64)
			        reader.onload=function(evt){   //读取操作完成时触发。
			            $("#img").attr('src',evt.target.result)  //将img标签的src绑定为DataURL
			        };
			        
			    }else{
			        alert("上传失败");
			    }
			}
			
			function getEditorData(){
				$("#aValue").val(editor.txt.html());
				var acticlename = $.trim($('#acticlename').val());
			    var articletype = $.trim($('#articletype').val());
			    var articleCover = $('#articleCover')[0].files[0];
				var value = editor.txt.html();
				
			    var formData = new FormData();

			    formData.append("articleCover",$('#articleCover')[0].files[0]);
			    formData.append("articleName", acticlename);
			    formData.append("articleType", articletype);
			    formData.append("value", value);

			    $.ajax({
			        url:'${basePath }storefiles',
			        dataType:'json',
			        type:'POST',
			        async: false,
			        data: formData,
			        processData : false, // 使数据不做处理
			        contentType : false, // 不要设置Content-Type请求头
			        success: function(data){
			            if(data==1){
			            	alert("上传成功！！");
			            	location.reload();
			            }else if(data==0){
			            	alert("上传失败，请重试！！");
			            }else if(data==2){
			            	alert("没有填写文章名称，请重新填写！！")
			            }else if(data==3){
			            	alert("没有选择文章类型，请重新填写！！")
			            }else if(data==4){
			            	alert("没有选择文章封面，请重新填写！！")
			            }
			        }
			    });
				
			}
		</script>
	</body>
</html>